import React from 'react';
import { List, InputItem, NavBar,Icon,Grid } from 'antd-mobile';
import { connect } from 'react-redux';
import QueueAnim from 'rc-queue-anim';
import { sendmsg, getMsgList,recvmsg,readmsg  } from '../../redux/chat.redux';
import{ getChatId } from '../../util';
@connect(
state => state,
{ sendmsg, getMsgList,recvmsg,readmsg }
)
class Chat extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			text:'',
			msg:[],
			isShowCarousel:false
		}
	}
	componentDidMount(){
		if(this.props.chat.chatmsg.length === 0){
			this.props.getMsgList();
			this.props.recvmsg();
		}
		this.fixCarousel();
	}
	componentWillUnmount(){
		this.props.readmsg(this.props.match.params.userid);
	}
	fixCarousel(){
		setTimeout(function(){window.dispatchEvent(new Event('resize'))},0);
	}
	handleSubmit(){
		const from = this.props.user._id;
		const to = this.props.match.params.userid;
		this.props.sendmsg(from,to,this.state.text);
		this.setState({text:''});
	}
	render(){
		const emoji = '😄 '
						.split(' ')
						.filter(v => v)
						.map(v => ({text:v}));
		const userid = this.props.user._id;
		const toUserid = this.props.match.params.userid;
		const users = this.props.chat.users;
		const chatid = getChatId(userid,toUserid);
		
		const chatmsgs = this.props.chat.chatmsg.filter(v => v.chatid === chatid );
		return (
			<div id="chat-page" className='fixd-header'>
				<NavBar
				  mode="dark"
				  icon={<Icon type="left" />}
				  onLeftClick={() => this.props.history.goBack()}
				>
				{users[toUserid] ? users[toUserid].user : null}
				</NavBar>

				<div>
					<QueueAnim delay={150}>
						{chatmsgs.map(v => {
							const avatar = require(`../img/${users[v.from].avatar}.jpg`)
							return v.from === toUserid 
								? (<List key={v._id}>
										<List.Item thumb={avatar}>{v.content}</List.Item>
									</List>)
								: (<List key={v._id}>
										<List.Item 
											extra={<img src={avatar} alt={avatar} />} 
											className='chat-me'
										>
											{v.content}
										</List.Item>
									</List>)
						})}
					</QueueAnim>
				</div>
				<div className="stick-footer">
					<List>
						<InputItem
							placeholder='请输入'
							value={this.state.text}
							onChange={v=>{
								this.setState({text:v})
							}}
							extra={
								<div>
									<span 
										style={{marginRight:'10px'}}
										onClick={() => {
											this.setState({isShowCarousel:!this.state.isShowCarousel});
											this.fixCarousel();
										}}
									>😃</span>
									<span onClick={()=> this.handleSubmit()}>发送</span>
								</div>
							}
						>
							
						</InputItem>
					</List>
					{this.state.isShowCarousel 
					?<Grid  
						data={emoji} 
						columnNum={9}
						isCarousel
						carouselMaxRow = {4}
						onClick={el => {
							this.setState({
								text:this.state.text+el.text
							})
						}}
					>
					</Grid> : null }
					
				</div>
			</div>
		)
	}
	
}

export default Chat